<template>
	<view class="container">
		<uni-section title="注册" type="line">
			<view class="card">
				<uni-forms ref="form" :modelValue="userData" :rules="rules" validate-trigger="bind">
					<uni-forms-item label="头像">
						<uni-file-picker limit="1" :del-icon="false" disable-preview :imageStyles="imageStyles"
							file-mediatype="image" @select="fileSelected" :auto-upload="false">选择</uni-file-picker>
					</uni-forms-item>
					<uni-forms-item label="账号" required name="account">
						<uni-easyinput v-model="userData.account" type="text" trim="all"
							placeholder="请输入账号"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="邮箱" required name="email">
						<uni-easyinput v-model="userData.email" type="text" trim="all"
							placeholder="请输入邮箱"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="姓名" required name="name">
						<uni-easyinput v-model="userData.name" placeholder="请输入姓名" type="text"
							trim="all"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="所属院系" required name="dept">
						<uni-data-select v-model="userData.dept" :localdata="DeptEnum"
							@change=""></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="电话" required name="phone">
						<uni-easyinput v-model="userData.phone" placeholder="请输入电话" type="number"
							trim="all"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="年龄" required name="age">
						<uni-number-box v-model="userData.age" :step="1" :min="0" :max="150" />
					</uni-forms-item>
					<uni-forms-item label="性别" required name="gender">
						<uni-data-checkbox v-model="userData.gender" :localdata="sexs"></uni-data-checkbox>
					</uni-forms-item>
				</uni-forms>
				<uni-forms ref="pwdForm" :modelValue="pwdData" :rules="pwdRules" label-width="90px">
					<uni-forms-item label="密码" name="newPwd" required>
						<uni-easyinput v-model="pwdData.newPwd" placeholder="请输入新密码" trim="all"
							type="password"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="再次输入密码" name="newPwdT" required>
						<uni-easyinput v-model="pwdData.newPwdT" placeholder="请再次输入新密码,确保两次密码一致" trim="all"
							type="password"></uni-easyinput>
					</uni-forms-item>
				</uni-forms>
				<view class="button-group">
					<button type="primary" size="mini" @click="register">注册</button>
					<button type="warn" size="mini" @click="cancel">取消</button>
				</view>
			</view>
		</uni-section>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		onShow,
		onLoad,
	} from '@dcloudio/uni-app';
	import {
		userInfo,
		deleteFile,
		saveInfo,
		registerInfo,
		uploadFile
	} from '@/common/js/api';
	import {
		sexs,DeptEnum
	} from '@/common/js/common';
	import {
		navigateBack
	} from '@/common/js/common';

	const pwdData = ref({
		newPwd: '',
		newPwdT: ''
	});

	const userData = ref({
		account: '',
		age: null,
		avatarUrl: '',
		gender: null,
		name: '',
		phone: '',
		pwd: '',
		email: '',
		role: '用户'
	});

	const selectedInfo = ref();
	const selectedFilePath = ref();
	const isSelected = ref(false);
	const form = ref(null);
	const pwdForm = ref(null);
	const fileLists = ref();
	const sendBtn = ref();

	function onClickSend() {
		//模拟请求发送短信
		setTimeout(() => {
			//发送成功,开始倒计时
			sendBtn.value.start()

			//发送失败，重置发送按钮状态
			//this.$refs.sendBtn.reset()
		}, 500);
	}


	const pwdRules = ref({
		newPwd: {
			rules: [{
					required: true,
					errorMessage: '密码不能为空',

				},
				{
					pattern: '^(?=.*[a-z])(?=.*\\d)[a-z\\d]{8,12}$',
					errorMessage: '密码格式错误',
				}
			]
		},
		newPwdT: {
			rules: [{
					required: true,
					errorMessage: '密码不能为空'
				},
				{
					pattern: '^(?=.*[a-z])(?=.*\\d)[a-z\\d]{8,12}$',
					errorMessage: '密码格式错误',
				},
				{
					validateFunction: function(rule, value, data, callback) {
						if (value != data.newPwd) {
							callback('两次输入的密码不一致');
						}
						return true;
					}
				}
			]
		},
	});

	// 表单校验规则
	const rules = ref({
		name: {
			rules: [{
				required: true,
				errorMessage: '姓名不能为空'
			}]
		},
		account: {
			rules: [{
				required: true,
				errorMessage: '账号不能为空'
			}]
		},
		phone: {
			rules: [{
				required: true,
				errorMessage: '电话不能为空'
			}, {
				format: 'number',
				errorMessage: '电话只能输入数字'
			}]
		},
		gender: {
			rules: [{
				required: true,
				errorMessage: '性别选择不能为空'
			}]
		},
		email: {
			rules: [{
				required: true,
				errorMessage: '邮箱不能为空'
			}, {
				pattern: '^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+',
				errorMessage: '邮箱格式错误',
			}]
		},
	});

	const imageStyles = ref({
		width: 64,
		height: 64,
		border: {
			radius: '50%'
		}
	});

	const register = () => {
		pwdForm.value.validate().then(res => {
			userData.value.pwd = pwdData.value.newPwd;
			// 如果上传了头像
			if (isSelected.value) {
				uploadFile(selectedInfo.value.tempFilePaths[0]).then(avatarUrl => {
					userData.value.avatarUrl = avatarUrl;
					registerInfo(form, userData.value);
				});
			}
		}).catch(err => {
			console.log(err);
		});

	}

	// 修改头像方法
	const fileSelected = (e) => {
		selectedInfo.value = e;
		isSelected.value = true;
	};


	// 取消方法，在这里删除上传的文件
	const cancel = () => {
		navigateBack();
	};
</script>

<style scoped>
	.container {
		padding: 15px;
	}

	.card {
		margin-top: 10px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}
</style>